<template>
  <div
    class="home-hope"
    ref="homeHope"
  >
    <h2 class="class-title">最受期待 <span class="go">查看完整榜单></span></h2>
    <el-card
      class="box-card"
      v-for="(hope,index) in hopeList"
      :key="hope.id"
    >
      <div
        class="hope-wrap1"
        v-if="index === 0"
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <i class="hope-top"></i>
        <img
          src="../../../../public/home/hope/1.jpg"
          alt=""
        >
        <div class="hope-con">
          <h3 class="hope-title">{{ hope.title }}</h3>
          <p class="hope-time">上映时间:{{ hope.start_date }}</p>
          <div class="hope-num">
            {{ hope.num }}人想看
          </div>
        </div>
      </div>
      <div
        class="hope-wrap2"
        v-else-if="index === 1"
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <i class="hope-top">{{ index + 1 }}</i>
        <img
          src="../../../../public/home/hope/2.jpg"
          alt=""
        >
        <h3 class="hope-title">{{ hope.title }}</h3>
        <div class="hope-num">
          {{ hope.num }}人想看
        </div>
      </div>
      <div
        class="hope-wrap2"
        v-else-if="index === 2"
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <i class="hope-top">{{ index + 1 }}</i>
        <img
          src="../../../../public/home/hope/3.jpg"
          alt=""
        >
        <h3 class="hope-title">{{ hope.title }}</h3>
        <div class="hope-num">
          {{ hope.num }}人想看
        </div>
      </div>
      <div
        class="hope-wrap3"
        v-else
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <span class="hope-index">{{ index + 1 }}</span>
        <h3 class="hope-title">{{ hope.title }}</h3>
        <div class="hope-num">
          {{ hope.num }}人想看
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data: () => ({
    hopeList: [],
    moveIndex: ''
  }),
  created() {
    this.getHope()
  },
  methods: {
    changeColor(index) {
      this.arr = Array.from(this.$refs.homeHope.children).slice(1)
      this.arr[index].style.backgroundColor = '#eee'
      this.moveIndex = index
    },
    moveColor() {
      this.arr[this.moveIndex].style.backgroundColor = "#fff"
    },
    async getHope() {
      try {
        const { data: { message } } = await this.Api.getHope()
        this.hopeList = message
        console.log(this.hopeList)
      } catch (error) {
        this.$MsgBox('获取首页最受期待的信息失败')
      }
    },
  }
}
</script>
<style lang="less">
.home-hope {
  .class-title {
    color: #ffb400;
  }
  .el-card:nth-child(5).is-always-shadow,
  .el-card:nth-child(6).is-always-shadow,
  .el-card:nth-child(7).is-always-shadow,
  .el-card:nth-child(8).is-always-shadow,
  .el-card:nth-child(9).is-always-shadow,
  .el-card:nth-child(10).is-always-shadow,
  .el-card:nth-child(11).is-always-shadow{
    border: none;
    box-shadow:none;
  }
  .el-card {
    .el-card__body {
      padding: 0;
    }
    .hope-title {
      font-size: 18px;
      color: #333;
      font-weight: normal;
    }
    .hope-num {
      color:#ffb400;
    }
    .hope-wrap1 {
      height: 194px;
      position: relative;
      .hope-top {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 22px;
        height: 25px;
        background: url(../../../../public/home/hope/hope-top.png);
      }
      .hope-con {
        position: absolute;
        left: 160px;
        top: 60px;
        .hope-title,.hope-time {
          margin-bottom: 12px;
        }
        
        .hope-time {
          color: #999;
        }
      }
      
    }
    .hope-wrap2 {
      width: 170px;
      position: relative;
      .hope-top {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #ffb400;
        color: #fff;
      }
    }
  }
  .el-card:nth-child(3),.el-card:nth-child(4) {
    width: 170px;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
    .hope-title,.hope-num {
      padding-left: 10px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }
  .el-card:nth-child(4) {
    margin-left: 20px;
  }
  .el-card:nth-child(5) {
    clear: both;
  }
  .hope-wrap3 {
    height: 35px;
    padding: 10px 3px;
    line-height: 35px;
    .hope-index {
      display: block;
      width: 20px;
      font-size: 18px;
      float: left;
      font-style: italic;
      color: #999;
      margin-right: 10px;
    }
    .hope-title {
      display: block;
      max-width: 190px;
      overflow: hidden;
      font-size: 18px;
      color: #333;
      float: left;
    }
    .hope-num {
      display: block;
      float: right;
    }
  }
}
</style>